<template>
	<view v-if="canshow" class="item" @click="toDetail">
		<view class="item-head">
			<text style="font-size:30rpx;" @click.stop="toStore">{{storeName}}</text>
			<uni-icons type="arrowright"></uni-icons>
		</view>
		<view class="item-content">
			<view @click.stop="checkSelect()">
				<uni-icons :type="!isSelect?'circle':'checkbox-filled'" size="24"
					:color="!isSelect?'#888888':'#2fb6ff'"></uni-icons>
			</view>
			<image class="item-image" :src="$urlPrefix+fGoods.mainImages[0]"></image>

			<view class="item-right">
				<view style="font-size: 34rpx;font-weight: bold;" class="title">{{fGoods.title}}</view>
				<!-- <view style="font-size: 30rpx;color: #2fb6ff;" @click.stop="showPop">套餐选择</view>
 -->
			</view>
		</view>
		<view class="price">
			<text class="num">{{fGoods.price*goods.count}}</text>
			<text style="font-size: 28rpx;">¥</text>
		</view>
		<view class="bar-select_num">
			<text v-if="!isSelect" @click.stop="decrease" style="border-right: 2rpx #bfbfbf solid;">-</text>
			<text style="font-size: 28rpx;">{{goods.count}}份</text>
			<text v-if="!isSelect" @click.stop="increase" style="border-left: 2rpx #bfbfbf solid;">+</text>
		</view>
		<!-- 抽屉 -->
		<min-popup class="min-popup" :show="pop" @close="pop_close" @click.shop>
			<!-- 选择套餐抽屉 -->
			<goods-detail-select-package :goods="fGoods" @selectPackage="selectPackage"
				:nowSelectPackageIndex="nowSelectPackageIndex"></goods-detail-select-package>
		</min-popup>

	</view>
</template>

<script>
	export default {
		props: {
			goods: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		name: "card-list-item",
		data() {
			return {
				isSelect: false,
				storeName: "",
				storeId: 0,
				fGoods: {},
				nowSelectPackageIndex: 0,
				pop: false,
				canshow: false
			};
		},
		created() {
			uni.showLoading({})
			var vue = this
			vue.fGoods = this.$fixOneGoods(vue.goods.goods)
			vue.storeId = vue.fGoods.storeId
			//console.log(vue.storeId);
			vue.$request("store/getAll", {}, function(res) {
				var allStore = res.data.data
				for (var i = 0; i < allStore.length; i++) {
					if (allStore[i].id === vue.storeId) {
						vue.storeName = allStore[i].name
					}
				}
				uni.hideLoading()
				vue.canshow = true
			})
		},
		methods: {
			toStore() {
				uni.navigateTo({
					url: "/pages/store-detail/store-detail?id=" + this.storeId
				})
			},
			toDetail() {
				uni.navigateTo({
					url: "/pages/goods-detail/goods-detail?id=" + this.fGoods.id
				})
			},
			pop_close() {
				this.pop = false
			},
			showPop() {
				this.pop = true
			},
			selectPackage(index) {
				this.nowSelectPackageIndex = index
			},
			checkSelect() {
				//console.log(this.goods);
				this.$emit("select", {
					goodsId: this.fGoods.id,
					count: this.goods.count,
					price:this.fGoods.price
				})
				this.isSelect = !this.isSelect
			},
			increase() {
				var vue = this
				uni.showLoading({})
				//console.log(vue.goods.goods.id);
				vue.$request("cart/add", {
						userId: uni.getStorageSync("user").id,
						goodsId: vue.goods.goods.id
					},
					function() {
						vue.$emit("flash")
						uni.hideLoading()
					}
				)
			},
			decrease() {
				var vue = this
				uni.showLoading({})
				//查询这个goodsId的购物车
				vue.$request("cart/getOne",{goodsId:vue.goods.goods.id},function(res){
					if(res.data.data.length != 0){
						vue.$request("cart/delete",{id:res.data.data[0].id},function(){
							vue.$emit("flash")
							uni.hideLoading()
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.item {
		display: flex;
		flex-direction: column;
		//border: 2rpx solid red;
		height: 300rpx;
		position: relative;
		margin: 10rpx;
		box-shadow: 0 4rpx 6rpx #bfbfbf;

		.price {
			position: absolute;
			bottom: 10rpx;
			right: 200rpx;

			.num {
				font-size: 38rpx;
				color: red;
				margin-right: 4rpx;
			}
		}

		.bar-select_num {
			height: 50rpx;
			width: 150rpx;
			//border: 2rpx solid red;
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
			display: flex;
			flex-direction: row;
			border-radius: 15rpx;
			overflow: hidden;
			justify-content: center;
			align-items: center;
			box-shadow: 0rpx 0rpx 4rpx #bfbfbf;

			text {
				flex-grow: 1;
				text-align: center;
				position: relative;
				right: -4rpx;
			}
		}

		.item-head {
			height: 50rpx;
			//border: 2rpx solid green;
			padding: 0 20rpx;
		}

		.item-content {
			padding: 10rpx;
			flex-grow: 4;
			display: flex;
			flex-direction: row;
			align-items: center;
			//border: 2rpx solid blue;

			.item-image {
				height: 200rpx;
				width: 200rpx;
				margin-left: 10rpx;
				box-sizing: border-box;
			}

			.item-right {
				display: flex;
				margin-left: 20rpx;
				flex-direction: column;
				height: 100%;
				width: 400rpx;

				.title {
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
				}
			}
		}

		.item-right {
			display: flex;
			margin-left: 20rpx;
			flex-direction: column;
			height: 100%;
		}

	}
</style>
